<template>
<div class="auto">
  <ul class="zhibo_list">
    <li @click="detail(index)" v-for="(live,index) in lives">
      <div class="curse">
        <img :src="live.liveImage" alt="" width="280" height="150">
        <span>{{live.liveTime}}</span>
      </div>
      <p>{{live.liveTitle}}</p>
      <div class="msg">
        <img :src="live.liveImage" alt="" width="28" >{{live.lecturerName}}
        <span class="pull-right" v-if="live.regFee === 0">免费</span>
        <span class="pull-right vipfree" v-else-if="isVip > 0 && live.isVipFree == 0">￥{{live.regFee}}</span>
        <span class="pull-right" v-else>￥{{live.regFee}}</span>
      </div>
    </li>
  </ul>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .auto{
    .zhibo_list{
      font-size: 0;
      padding-top: 30px;
      text-align: left;
      li{
        display: inline-block;
        width: 282px;
        border:1px solid #ddd;
        text-align: left;
        margin:0 24px 30px 0;
        cursor: pointer;
        background-color: #fff;
        .curse{
          position: relative;
          img{
            object-fit: cover;
          }
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
          .vip{
            background: url("../../assets/vip.png") no-repeat;
            width: 24px;
            height: 36px;
            background-size: 100% 100%;
            font-size: 12px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 0;
            top:0
          }
        }
        >p{
          font-size: 14px;
          color: #333;
          padding: 15px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .msg{
          font-size: 14px;
          color: #333;
          padding: 15px;
          img:not(.ren){
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
            height: 28px;
          }
          .mianfei{
            color: #ff3300;
          }
          .vipfree{
            text-decoration: line-through;
            color: #ff3300;
          }
        }
      }
      li:hover{
        transform: translateY(-10px);
        border-color: #957960;
        transition: all 0.3s;
      }
      li:nth-child(4n){
        margin-right: 0;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
    export default {
        name: '',
        props: ['lives','isVip'],
        data() {
            return {
            };
        },
        methods: {
          detail(index){
            let liv = this.lives[index];
            this.$router.push({
              name: 'zhibodetail',
              query:{
                liveId:liv.id,
              }
            })
          }
        },
        created() {
        },
        components: {}
    }
</script>
